<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <el-form ref="queryParams" :model="queryParams" size="small" :inline="true" v-show="showSearch"
          label-width="50px">
          <el-form-item label="名称">
            <el-input v-model="queryParams.specsName" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.status" clearable  placeholder="请选择网关状态">
              <el-option label="正常" value="0"></el-option>
              <el-option label="停用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间">
            <el-date-picker v-model="tiemValue" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitsear" icon="el-icon-search" size="mini">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 新增 -->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="add">新增</el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-table v-loading="loading" :data="tableData" border style="width: 100%" class="mb20">
        <el-table-column prop="capsuleInfoTitle" label="项目" align="center" width="350">
        </el-table-column>
        <el-table-column prop="specsName" label="名称" align="center"  width="250">
        </el-table-column>
        <!-- <el-table-column prop="serverDesc" label="服务内容" align="center">

        </el-table-column> -->
        <el-table-column prop="specsTags" label="规格名称" align="center" width="160">
        </el-table-column>
        <el-table-column prop="specsTags" label="房间规格" align="center" width="210">
          <template slot-scope="scope">
            <!--  v-if="scope.row.specsItemsNum == 0"  -->
            <el-button type="primary" plain size="mini" icon="el-icon-edit"
              @click.stop="addModile(scope.row.id , scope.row.capsuleInfoId , 'add')">添加</el-button>
            <el-button type="success" plain size="mini"
              @click.stop="addModile(scope.row.id , scope.row.capsuleInfoId , 'edit')">查看<i
                class="el-icon-d-arrow-right el-icon--right"></i></el-button>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template slot-scope="scope">
            <div :style="{color:scope.row.status == 0 ? '#5ac725' : '#909399'}">{{scope.row.status == 0 ? '正常' : '停用'}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="stayPrice" label="价格" align="center" width="120">
          <template slot-scope="scope">
            <div style="color: #e45656;">{{scope.row.stayPrice}}元</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" width="260">
        </el-table-column>
        <el-table-column label="操作" width="210" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-document"
              @click="spaceRoomDetail(scope.row.id , types = 'detail')">详情</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit"
              @click="spaceRoomDetail(scope.row.id , types = 'edit')">编辑</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background align='right' @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum" :page-size="queryParams.pageSize"
        layout="prev, pager, next" :total="total">
      </el-pagination>
    </el-row>
    <!-- 新增 -->
    <el-dialog :title="types == 'add'?'新增规格':(types == 'edit'?'编辑规格':'太空舱详情')" :visible.sync="roomVisibles" width="40%"
      :before-close="handleClose">
      <el-form ref="fromSpaceRoom" :model="fromSpaceRoom" label-width="120px" :rules="rules">
        <el-row>
          <el-form-item label="太空舱基地" prop="capsuleInfoId">
            <el-select ref="selectRoom" v-model="fromSpaceRoom.capsuleInfoId" placeholder="请选择太空舱基地" :disabled="flag">
              <el-option v-for="(item ,index) in spaceRoomList" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-col :span="20">
            <el-form-item label="规格名称" prop="specsName">
              <el-input v-model="fromSpaceRoom.specsName" placeholder="请输入太空舱规格名称" />
            </el-form-item>
            <el-form-item label="政策与服务内容" prop="serverDesc">
              <el-button type="primary" class="mb8" @click="editVisibles = true" :disabled="(types == 'add' || types == 'edit') ? false : true">点击编辑</el-button>
              <el-input v-model="fromSpaceRoom.serverDesc" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"
                placeholder="请输入政策与服务内容" :disabled='true'/>
            </el-form-item>
            <el-form-item label="规格标签" prop="specsTags">
              <el-input v-model="fromSpaceRoom.specsTags" placeholder="请输入规格标签,多个请使用/隔开" />
            </el-form-item>
            <el-form-item label="住宿单位" prop="stayUnit">
              <el-select v-model="fromSpaceRoom.stayUnit" placeholder="请选择住宿单位:天/小时">
                <el-option label="天" value="1"></el-option>
                <el-option label="小时" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="住宿价格" prop="stayPrice">
              <el-input v-model="fromSpaceRoom.stayPrice" placeholder="请输入太空舱住宿价格" />
            </el-form-item>
            <el-form-item label="规格类型" prop="specsType">
              <el-select ref="selectRoom" v-model="fromSpaceRoom.specsType" placeholder="请选择规格类型">
                <el-option v-for="(item ,index) in roomTypeList" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否启用" prop="status">
              <el-switch v-model="status" active-color="#13ce66" inactive-color="#d1d1d1">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="types == 'add' || types == 'edit'">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary"
          @click="types == 'add' ? onSubmit('fromSpaceRoom') : (types == 'detail'? '' : handleEdit_())">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 政策与服务编辑 -->
    <el-dialog title="政策与服务内容编辑" :visible.sync="editVisibles" width="66%" :before-close="editClose">
      <tinymce :height="300" v-model="tiny.value"></tinymce>
      <span slot="footer" class="dialog-footer" v-if="types == 'add' || types == 'edit'">
        <el-button @click="editClose">取 消</el-button>
        <el-button type="primary"
          @click="comEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    spaceRoom,
    spaceRoomDetail,
    spaceRoomDelete,
    spaceRoomAdd,
    spaceRoomType,
    capsuleInfoSelects
  } from '@/api/space/spaceRoom'
  import tinymce from "@/components/tinymce/index.vue"
  export default {
    components: {
      tinymce
    },
    data() {
      return {
        roomVisibles: false,
        loading: true,
        roomTypeList: [],
        spaceRoomList: [],
        tableData: [],
        total: 200,
        types: 'add',
        showSearch: true,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          specsName: '',
          status: '',
          createBeginTime: '',
          createEndTime: ''
        },
        formData: {
          // "capsuleInfoId": 0, // 太空舱id
          "createBeginTime": "", //开始时间
          "createEndTime": "", //结束时间
          "pageNum": 0,
          "pageSize": 0,
          "specsName": "", //规格名称
          // "specsType": 0,
          "status": 99
        },
        status: true,
        tiemValue: '',
        // 新增规格
        fromSpaceRoom: {
          "capsuleInfoId": '', // 太空舱id
          "serverDesc": "", // 政策与服务内容
          "specsName": "", // 太空舱规格名称
          "specsTags": "", //规格简称
          "specsType": "", // 规格类型
          "status": true, // 状态
          "stayPrice": "", //单位价格
          "stayUnit": "" //住宿单位
        },
        rules: {
          specsName: [{
            required: true,
            message: '请输入太空舱规格名称',
            trigger: 'blur'
          }],
          serverDesc: [{
            required: true,
            message: '请输入政策与服务内容',
            trigger: 'blur'
          }],
          specsTags: [{
            required: true,
            message: '请输入规格简称如：大床/22㎡/全景天窗',
            trigger: 'blur'
          }],
          stayPrice: [{
            required: true,
            message: '请输入单位价格',
            trigger: 'blur'
          }]
        },
        flag: false,
        editVisibles: false,
        tiny: {
          value: null,
        }
      }
    },
    mounted() {
      // this.$nextTick(() => {
      //   this.$refs.selectRoom.model = this.roomTypeList.find(item => dictCode === 105)
      // })
    },
    created() {
      this.getList()
      spaceRoomType('capsule_specs_type').then(res => {
        this.roomTypeList = res.data
      })
      capsuleInfoSelects().then(res => {
        this.spaceRoomList = res.data
      })
    },
    methods: {
      getList() {
        this.loading = true
        this.formData.status = '99'
        this.formData.pageNum = this.queryParams.pageNum
        this.formData.pageSize = this.queryParams.pageSize
        spaceRoom(this.formData).then(res => {
          this.tableData = res.data.rows
          this.total = res.data.total
          this.loading = false
          // console.log("list-->", res)
        })
      },
      handleSizeChange(val) {
        this.queryParams.pageNum = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.queryParams.pageNum = val
        this.getList()
      },
      add() {
        this.types = 'add'
        this.roomVisibles = true
      },
      //新增或修改
      addSpaceRoom(data) {
        this.flag = false
        spaceRoomAdd(data).then(res => {
          this.$message({
            message: '提交成功！',
            type: 'success'
          })
          this.roomVisibles = false
          this.fromSpaceRoom = { // 重置
              "capsuleInfoId": '',
              "serverDesc": "",
              "specsName": "",
              "specsTags": "",
              "specsType": "",
              "status": true,
              "stayPrice": "",
              "stayUnit": ""
            },
            this.getList()
        })
      },
      // 提交
      onSubmit(fromSpaceRoom) {
        this.$refs[fromSpaceRoom].validate((valid) => {
          if (valid) {
            // console.log(this.fromSpaceRoom)
            if (this.fromSpaceRoom.capsuleInfoId == '') return this.$message({
              message: '请选择太空舱基地',
              type: 'warning'
            })
            if (this.fromSpaceRoom.stayUnit == '') return this.$message({
              message: '请选择住宿单位天/小时',
              type: 'warning'
            })
            if (this.status) {
              this.fromSpaceRoom.status = 0
            } else {
              this.fromSpaceRoom.status = 1
            }
            this.addSpaceRoom(this.fromSpaceRoom)

          } else {
            this.$message({
              message: '提交失败！',
              type: 'error'
            })
            return false
          }
        })
      },
      // 详情
      spaceRoomDetail(id) {
        this.flag = true
        spaceRoomDetail(id).then(res => {
          let {
            capsuleInfoId,
            serverDesc,
            specsName,
            specsTags,
            specsType,
            status,
            stayPrice,
            stayUnit,
            id
          } = res.data
          if (status == 0) {
            this.status = true
          } else {
            this.status = false
          }
          this.roomTypeList.forEach(item => {
            if (item.dictValue == specsType) {
              specsType = item.dictLabel
            }
          })
          if (stayUnit == 1) {
            stayUnit = '天'
          } else {
            stayUnit = '小时'
          }
          this.fromSpaceRoom = {
            capsuleInfoId,
            serverDesc,
            specsName,
            specsTags,
            specsType,
            status,
            stayPrice,
            stayUnit,
            id
          }
          this.roomVisibles = true
        })
      },
      // 提交编辑
      handleEdit_() {
        let parmas = this.fromSpaceRoom
        if (this.fromSpaceRoom.stayUnit == '天') {
          parmas.stayUnit = '1'
        } else {
          parmas.stayUnit = '2'
        }
        if (this.status) {
          parmas.status = 0
        } else {
          parmas.status = 1
        }
        this.roomTypeList.forEach(item => {
          if (item.dictLabel === parmas.specsType) {
            parmas.specsType = item.dictValue
          }
        })
        this.addSpaceRoom(parmas)
      },
      onSubmitsear() {
        if (this.tiemValue && this.tiemValue.length > 0) {
          this.queryParams.createBeginTime = this.tiemValue[0]
          this.queryParams.createEndTime = this.tiemValue[1]
        } else {
          this.queryParams.createBeginTime = ''
          this.queryParams.createEndTime
        }
        let data = this.queryParams
        if (data.status == '') {
          data.status = "99"
        }
        spaceRoom(data).then(res => {
          this.tableData = res.data.rows
          this.total = res.data.total
        })
      },
      resetQuery() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          specsName: '',
          status: '',
          createBeginTime: '',
          createEndTime: ''
        }
        this.getList()
      },
      // 删除
      handleDelete(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          spaceRoomDelete(id).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getList()
            } else {
              this.$message({
                type: 'error',
                message: '删除失败'
              })
            }
          })
        })
      },
      handleClose() {
        this.roomVisibles = false
        this.fromSpaceRoom = { // 重置
          "capsuleInfoId": '',
          "serverDesc": "",
          "specsName": "",
          "specsTags": "",
          "specsType": "",
          "status": true,
          "stayPrice": "",
          "stayUnit": ""
        }
      },
      // 规格
      addModile(id, capsuleInfoId, types) {
        let flag = true
        let parmas = {
          id,
          capsuleInfoId,
          flag,
          types
        }
        this.$router.push({
          path: '/spaceSys/subspecification',
          query: parmas
        })
      },
      editClose() {
        this.editVisibles = false
      },
      comEdit(){
        this.fromSpaceRoom.serverDesc = this.tiny.value
       this.editVisibles = false
      }
    }
  }
</script>

<style lang="scss">
  .tox-tinymce {
    width: 100% !important;
  }
</style>
